<template>
  <div>
    <div>
      <div>
        <mainNavbar></mainNavbar>
      </div>
      <div class="main">
        <div class="main_narrow">
          <div class="main_content">
            <div class="left_box_account">
                <!-- <div>这里是左侧list</div> -->
                <div>
                    <account-list></account-list>
                </div>
            </div>
            <div class="right_box_account">
                <div class="right_box_account_content">
                    <!-- <div>这里是个人中心</div> -->
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mainNavbar from "../main/main-navbar";
import accountList from './account-list.vue';
export default {
  components: {
    mainNavbar,
    accountList,
  },
  mounted() {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style>
.main{
  background-image: url(http://localhost:88/api/user/test_pic/background_bili.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  position: absolute;
  top: 60px;
  bottom: 0px;
  min-width: 1200px;
  width: 100%;
  /* background: rgb(226, 180, 180); */
}
.main_narrow{
  position: relative;
  margin: 0 auto;
  width: 80%;
  height: 90%;
}

.main_content{
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid #aaa;
  margin-top: 20px;
  
  display: flex;
}
.left_box_account{
  background: #fff;
  position: absolute;
  width: 240px;
  height: 100%;
  border-radius: 10px;
  /* border-right: 1px solid #777; */
}
.right_box_account{
  position: absolute;
  left: 240px;
  right: 0px;
  /* position: relative; */
  /* margin-left: 10px; */
  /* width: 100%; */
  height: 100%;
}
.right_box_account_content{
  margin: 0 10px
}
</style>